<template>
  <div class="box">
    <van-nav-bar title="文章详情" left-arrow @click-left="$router.back()" />
    <div class="article-container">
      <h1 class="van-multi-ellipsis--l2"> {{list.title}}</h1>
      <van-cell class="user-info">
        <van-image fit='cover' slot="icon" round :src="list.aut_photo" />
        <div slot="title"> {{list.aut_name}}</div>
        <div slot="label"> {{list.pubdate |relativeTime}}</div>
        <van-button round :loading="isFollowloading" size="small" :type="list.is_followed ? 'default':'info' " :icon="list.is_followed ? '':'plus'" @click="onFollow"> {{list.is_followed ? '已关注':'关注'}} </van-button>
      </van-cell>
      <div v-html="list.content" ref="contentRef" class="content"> </div>
      <div class="end-text">
        正文结束
      </div>
      <list @reply-click='onReplyClick' @update-total-count='totalCount= $event' :commentList='comList' :article-id='articleId' />
    </div>
    <div class="footer">

      <van-button type="default" round size="small" @click="isShowPostComment=true">写评论</van-button>
      <van-icon name="chat-o" :badge="totalCount" />

      <van-icon :class="  [ list.is_collected ?  'isred':''] " :name="list.is_collected ? 'star':'star-o' " @click="onCollected" />
      <van-icon :color=" list.attitude===1 ?  'pink':''" :name=" list.attitude===1 ? 'good-job':'good-job-o' " @click="onLike" />
      <van-icon name="share" />

    </div>
    <van-popup v-model="isShowPostComment" position="bottom">
      <post-comment :target="articleId" @post-success='PostSuccess' v-if="isShowPostComment" />
    </van-popup>
    <van-popup v-model="isShowReply" position="bottom" :style="{ height: '100%' }">
      <replay v-if="isShowReply" @close='isShowReply=false' :article-id="articleId" :comment='ReplyComment' />
    </van-popup>
  </div>
</template>

<script>
import { getArticleById, deleteFollow, addFollow, deleteCollect, addCollect, deleteLike, addLike } from '@/api/article.js'
// import 'element-tiptap/lib/index.css'
// import { ElementTiptap, Doc, Text } from 'element-tiptap'
import { ImagePreview } from 'vant'
import List from './components/list.vue'
import PostComment from './components/post.vue'
import Replay from './components/reply.vue'
export default {
  name: 'arIndex',
  components: {
    List,
    PostComment,
    Replay
  },
  props: {
    articleId: {
      type: [String, Object, Number],
      ruquired: true
    }
  },
  data() {
    return {
      list: {},
      isFollowloading: false,
      isShowPostComment: false,
      comList: [],
      totalCount: 0,
      isShowReply: false,
      ReplyComment: null
    }
  },
  created() {
    this.loadArticle()
  },
  methods: {
    async loadArticle() {
      const { data: res } = await getArticleById(this.articleId)
      this.list = res.data

      this.$nextTick(() => {
        this.handlerPreviewImage()
      })
    },
    handlerPreviewImage() {
      const content = this.$refs.contentRef
      const imgs = content.querySelectorAll('img')
      const imgPath = []
      imgs.forEach((item, index) => {
        imgPath.push(item.src)
        item.onclick = function() {
          ImagePreview({
            images: imgPath,
            startPosition: index
          })
        }
      })
    },
    async onFollow() {
      this.isFollowloading = true
      try {
        if (this.list.is_followed) {
          await deleteFollow(this.list.aut_id)
          this.list.is_followed = !this.list.is_followed
        } else {
          await addFollow(this.list.aut_id)
          this.list.is_followed = !this.list.is_followed
        }
      } catch {
        this.$toast({
          message: '操作失败'
        })
      }
      this.isFollowloading = false
    },
    async onCollected() {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      if (this.list.is_collected) {
        await deleteCollect(this.list.art_id)
      } else {
        await addCollect(this.list.art_id)
      }
      this.list.is_collected = !this.list.is_collected
      this.$toast.success({
        message: !this.list.is_collected ? '取消收藏' : '添加收藏'
      })
    },
    async onLike() {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      if (this.list.attitude === 1) {
        await deleteLike(this.list.art_id)
        this.list.attitude = -1
      } else {
        await addLike(this.list.art_id)
        this.list.attitude = 1
      }

      this.$toast.success({
        message: this.list.attitude === 1 ? '点赞成功' : '取消点赞'
      })
    },
    PostSuccess(data) {
      this.comList.unshift(data)
      this.totalCount++
      this.isShowPostComment = false
    },
    onReplyClick(data) {
      this.ReplyComment = data
      this.isShowReply = true
    }
  }
}
</script>
<style lang="less" scoped>
.box {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.article-container {
  position: fixed;
  top: 46px;
  bottom: 46px;
  left: 0;
  width: 100%;
  overflow-y: auto;
  overflow-x: unset;
}
h1 {
  padding: 0 16px;
  font-size: 18px;
}
.user-info {
  .van-image {
    width: 30px;
    height: 30px;
    margin-right: 15px;
  }
  .van-cell__title {
    font-size: 12px;
  }
  .van-cell__label {
    font-size: 8px;
    color: #ccc;
  }
}
.content {
  font-size: 12px;
  padding: 0;
  margin: 0;
  /deep/img {
    width: 120px;
    height: 73px;
  }
}
.footer {
  position: absolute;
  display: flex;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 46px;
  line-height: 46px;
  padding: 0 0 0 14px;
  border-top: 1px solid #eee;
  box-sizing: border-box;
  background-color: #fff;

  align-items: center;
  justify-content: space-evenly;
  .van-button {
    width: 160px;
    font-size: 16px;
  }
}
.isred {
  color: brown;
}
.end-text {
  text-align: center;
  border-top: 1px solid #cccccc;
  font-size: 12px;
}
</style>
